<template>
    <div>
       <div id="my-char"  ref="chart"></div>
    </div>
</template>

<script>
import echarts from "echarts";  //引入echarts
    export default {
         data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     this.$nextTick(() => {     //初始化
      this.initChart(); 
      this.getChartData();
      window.addEventListener("resize", () => {
        this.resize();           //监听屏幕大小，来刷新画布
      });
    });
  },
  methods: {
    //查询图表数据  动态的改变数据
    getChartData() {
      // this.chart.setOption({
      //   xAxis: {
      //     data: this.xAxisdata
      //   },
      //   series: {
      //     data: this.seriesdata
      //   }
      // });
    //   隐藏加载中的loading
      this.chart.hideLoading();
    },
    //初始化图表
    initChart() {
      let option = {
        title: {
        },
         tooltip: {
          trigger: "axis",
          formatter: "时间 : {b}<br />压力：{c}Mpa",
          axisPointer: {
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["13:20", "13:30", "13:40", "13:50", "13:60", "13:70", "13:80", "13:90", "13:100", "13:110"]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: [
          {
            name: "压力",
            type: "line",
            symbol:"circle",
            symbolSize:[8,8],
            itemStyle:{color:"#43B9E1"},
            lineStyle:{
              color:"#43B9E1"
            },
            data: [8, 
              {
                value : 6,
                label: {
                  show:true,
                  formatter:"充装开始",
                  fontSize:"18"
                },
                symbol:"roundRect",
                symbolSize:[8,16],
                itemStyle:{
                  color:"#FB9B00"
                }
              },
              7,13,18, 
              {
            //   <!--为某一点的数据做样式-->
                value : 19,
                symbol:"roundRect",
                symbolSize:[8,16],
                label: {
                  show:true,
                  formatter:"充装结束",
                  fontSize:"18"
                },
                itemStyle:{
                  color:"#3FC7C5"
                }
            }, 
            12, 11,10,9
            ],
          },
        ]
      };

      this.chart = echarts.init(this.$refs.chart);   //定义
      this.chart.showLoading();  //等待的显示
      this.chart.setOption(option);  //展示
      this.chart.resize(); //刷新画布
    },
    resize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
    }
</script>

<style scoped>
#my-char{
    width: 600px;
    height: 300px;
}
</style>